<template>
  <Modal v-model="visible" title="用户详情" >
    <Form
      ref="formInline"
      :model="data"
      :rules="ruleInline"
      :label-width="100"
    >
      <FormItem prop="nickname" label="用户名">
        <i-input type="text" v-model="data.nickname" placeholder="nickname">
        </i-input>
      </FormItem>
      <FormItem prop="email" label="邮箱">
        <i-input v-model="data.email" placeholder="email"> </i-input>
      </FormItem>
      <FormItem label="性别">
        <RadioGroup v-model="data.gender">
            <Radio :label="-1" disabled>
            <span>未知</span>
          </Radio>
          <Radio :label="0">
            <span>女</span>
          </Radio>
          <Radio :label="1">
            <span>男</span>
          </Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="创建时间">
          {{ data.created_time | dateFormat }}
      </FormItem>
      <FormItem label="最后修改时间">
          {{ data.last_modified_time | dateFormat }}
      </FormItem>
    </Form>
    <template #footer>
      <Button type="primary" @click="handleCancel">返回</Button>
      <Button type="primary" @click="handleUpdata">修改</Button>
    </template>
  </Modal>
</template>
<script>
export default {
  name: "AddUser",
  model: {
    prop: "open",
    event: "change",
  },
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    userData: {
      type: Object,
      require: true,
      default: () => {},
    },
  },
  watch: {
    open: {
      handler: function (val) {
        this.visible = val;
      },
    },
    visible: {
      handler: function (val) {
        this.$emit("change", val);
      },
    },
    userData: {
        handler: function (val) {
            this.data = JSON.parse(JSON.stringify(val))
        }
    }
  },
  data() {
    return {
      visible: false,
      data:{},
      ruleInline: {
        nickname: [
          {
            required: true,
            message: "Please fill in the user nickname",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "Please fill in the email.",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleUpdata() {
      this.$refs.formInline.validate((valid) => {
        if (valid) {
          this.$API
            .POST_UPDATE_USER(this.data)
            .then((res) => {
              this.$Message.info(res);
            })
            .catch((err) => {
              console.log(err);
            })
            .finally(() => {
              this.visible = false;
              this.$emit("reload");
            });
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleCancel() {
      this.visible = false;
    },
  },
};
</script>
